<template>
    <div class="market">
        <h3>卧龙市场</h3>
        <ul class="picture">
            <li v-for="item in picture"><img :src="item" alt=""></li>
        </ul>
        <div class="paragraphone">
            <p>交通轨道：由于主要采用电器牵引，而且轮轨摩擦阻力较小，与公共...</p>
        </div>
        <div class="paragraph"  v-for="item2 in font">
            <p>{{ item2 }}</p>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref,reactive} from 'vue'
import img1 from '@/assets/img/3.png'
import img2 from '@/assets/img/4.png'
import img3 from '@/assets/img/5.png'
import img4 from '@/assets/img/6.png'
const picture = ref([img1,img2,img3,img4])
const font=ref([
                '节能环保：由于不断上涨的能源消耗和我们的专业知识，维护可持续...',
                '航空与船舰：如果你是再公海行驶，你需要确保你的船只的电力系统...',
                '石油、天然气及采矿：在市场中的安全性，可靠性，效率和最短的停机...'])
</script>
<style scoped lang="less">
.market{
    width: 1000px;
    height: 230px;
}
li{
    width: 220px;
    height: 130px;
    float: left;
    margin-left: 40px;
}
li:first-child{
    margin-left: 0px;
}
img{
    width: 100%;
    height: 100%;
}
.paragraphone{
    width: 210px;
    height: 34px;
    float: left;
}
.paragraph{
    width: 210px;
    height: 34px;
    float: left;
    margin-left: 50px;
}
</style>